<template>
  <div>
    <div class="img_top">
      <img width="100%" src="../../static/img/blank.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">留言</div>
      </div>
      <P class="about_p">每个人都有自己故事，只是演绎的方式不同。</P>
    </div>
    <div class="about_end">
      <el-avatar icon="el-icon-user-solid" class="icon"></el-avatar>
      <el-input
        maxlength="3000"
        show-word-limit
        type="textarea"
        class="input"
        :rows="6"
        placeholder="请输入内容"
        v-model="textarea"
      ></el-input>
      <el-button type="primary" @click="addComment()" class="inp_btn">发表评论</el-button>
      <el-button type="info" class="inp_btn1">取消评论</el-button>
      <div class="br"></div>

      <div class="mes" v-for="(item, index) in comments" :key="index">
        <el-avatar icon="el-icon-user-solid" class="user_icon"></el-avatar>
        <p class="user_name">{{item.userName}}</p>
        <p class="mess_time">{{item.createTime}}</p>
        <p class="mess_inf" >{{item.content}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import axios from 'axios'
  export default {
    data() {
      return {
        textarea: "",
        comments:{
          userName:""
        },
        Comment:{
          source:"MESSAGE_BOARD",
          status:1,
          toUserUid:"KiU4jiTa9n",
          userName:"1234",
          userUid:"",
          blogUid:"732886f96bfd74643c23018b3f870957"
        }
      };
    },
    methods:{
      findUserByUserName:function(){
        var _this = this;
        var username = Cookies.get("username");
        axios.get('/api/user/message/'+username).then(function (res) {
           _this.Comment.userUid = res.data.uid;
          // console.log(res.data.uid);
        })
      },
      //获取评论的方法
      findComment:function (blogUid) {
        var _this = this;
        axios.get('/api/comment/findComment/'+blogUid).then(function (res) {
          _this.comments = res.data;
          //alert(_this.comments.userName);
        })
      },
      addComment:function () {
        var _this = this;
        this.Comment.content = this.textarea;
        axios.post('/api/comment/addComment', _this.Comment).then(function(res) {
            alert(res.data);
          //uid:_this.uid,toUserId:_this.toUserId,blogUid:_this.blogUid,status:_this.status,createTime:_this.createTime,content:_this.content

        }).then(() =>{this.findComment("732886f96bfd74643c23018b3f870957")})
      }
    },
    mounted() {
      this.findComment("732886f96bfd74643c23018b3f870957");
      this.findUserByUserName();
    }
  };
</script>

<style>
  .about {
    width: 80%;
    height: 60px;
    margin-left: 10%;
    background-color: #f6f6f6;
    border-bottom: 1px #000 solid;
  }
  .about_end {
    width: 80%;
    margin-left: 10%;
    height: auto;
    background-color: #f6f6f6;
  }
  .about_btn {
    position: absolute;
    left: 160px;
    top: 310px;
  }
  .about_p {
    float: right;
    margin-right: 30px;
    line-height: 40px;
  }
  .about_mess1 {
    width: 100px;
    height: 40px;
    background-color: #000000;
    float: left;
    line-height: 40px;
    color: #ffffff;
    font-size: 14px;
  }
  .about_mess2 {
    width: 100px;
    height: 40px;
    background-color: #3a6ab5;
    float: left;
    line-height: 40px;
    color: #ffffff;
    font-size: 14px;
  }
  .icon {
    float: left;
    margin-left: 50px;
    margin-top: 50px;
  }
  .input {
    width: 1010px;
    margin-top: 30px;
    float: left;
    margin-left: 15px;
  }
  .inp_btn {
    margin-top: 30px;
    float: right;
    margin-right: 90px;
  }
  .inp_btn1 {
    margin-top: 30px;
    float: right;
    margin-right: 20px;
  }
  .br {
    height: 1px;
    width: 100%;
    margin-bottom: 270px;
  }
  .mes {
    width: 100%;
    height: 100px;
    background-color: antiquewhite;
  }
  .user_icon {
    float: left;
    margin-left: 50px;
    margin-top: 10px;
    /*
    order: 0;
    border-top-color: initial;
    border-top-style: initial;
    border-top-width: 0px;
    border-right-color: initial;
    border-right-style: initial;
    border-right-width: 0px;
    border-bottom-color: initial;
    border-bottom-style: initial;
    border-bottom-width: 0px;
    border-left-color: initial;
    border-left-style: initial;
    border-left-width: 0px;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    display: block;
    list-style-type:none;*/
  }
  .user_icon1{
    float: left;
    margin-left: 50px;
    margin-top: 10px;
    width: 30px;
    height: 30px;
    list-style-type:none;
  }
  .user_name {
    float: left;
    font-size: 18px;
    margin-left: 10px;
    list-style-type:none;
  }
  .mess_time {
    color: darkgray;
    float: left;
    margin-left: 20px;
    list-style-type:none;
  }
  .mess_inf {
    float: left;
    margin-left: -83px;
    margin-top: 50px;
    list-style-type:none;
  }
</style>
